import React from 'react'
import OperateBar from './OperateBar/index'
import Page from './Page/index'
import ToolBar from '@/components/Document/ToolBar/index'
import PropertyBar from '@/components/Document/PropertyBar/index'
import Elements from '@models/Elements'

import './index.css'
import { EControls } from '@/enums'

type State = {
  pageScale: string
  width: string
  height: string
}

const elements = [
  new Elements('行', 'icon-column-vertical', '布局', EControls.row),
  new Elements('列', 'icon-columns', '布局', EControls.col),
  new Elements('按钮', 'icon-anniu', '常用', EControls.button),
  new Elements('表格', 'icon-form', '常用', EControls.table),
  new Elements('图片', 'icon-image', '常用', EControls.image),
  new Elements('文本', 'icon-text', '常用', EControls.text),
  new Elements('输入框', 'icon-wenbenkuang', '表单', EControls.input),
  new Elements('文本域', 'icon-wenbenyu', '表单', EControls.textarea),
  new Elements('下拉框', 'icon-xialakuang', '表单', EControls.select),
  new Elements('单选框', 'icon-danxuan', '表单', EControls.radio),
  new Elements('多选框', 'icon-duoxuan', '表单', EControls.checkbox),
  new Elements('日期', 'icon-date', '表单', EControls.date),
  new Elements('评分', 'icon-pingfen', '表单', EControls.score),
  new Elements('开关', 'icon-kaiguanguan', '表单', EControls.switch),
  new Elements('滑动输入条', 'icon-slider', '表单', EControls.slider),
  new Elements('时间选择框', 'icon-shijian', '表单', EControls.time),
]
const groups = ['布局', '常用', '表单']
export default class Document extends React.Component<any, State> {
  constructor(props: any) {
    super(props)
    this.state = {
      pageScale: '1.0',
      width: '500',
      height: '500',
    }
  }

  render(): JSX.Element {
    return (
      <div className='document-aera'>
        <div>
          <ToolBar elements={elements} groups={groups} />
        </div>
        <div>
          <OperateBar
            scale={this.state.pageScale}
            width={this.state.width}
            height={this.state.height}
            onWidthChange={this.handleWidthChange.bind(this)}
            onHeightChange={this.handleHeightChange.bind(this)}
            onScaleChange={this.handleScaleChange.bind(this)}
          />
          <div className='page-aera'>
            <Page
              style={{
                width: this.state.width + 'px',
                height: this.state.height + 'px',
                transform: `translate(-50%, -50%) scale(${this.state.pageScale})`,
              }}
            />
          </div>
        </div>
        <div>
          <PropertyBar />
        </div>
      </div>
    )
  }

  handleScaleChange(event: string) {
    this.setState({ pageScale: event })
  }
  handleWidthChange(event: string) {
    console.log(event)
    this.setState({ width: event })
  }
  handleHeightChange(event: string) {
    console.log(event)
    this.setState({ height: event })
  }
}
